<template>
	<view>
        <!-- #ifndef APP-PLUS -->
        <uni-nav-bar fixed="true" left-text="编辑" @click-left="_clickHeader" title="购物车"></uni-nav-bar>
        <uni-nav-bar status-bar="true" background-color="transparent"></uni-nav-bar>
        <!-- #endif -->
        <template v-if="true">
            <view class="shoppingStore" v-for="(item, index) in cartData" :key="index">
                <view class="shoppingStore__header">
                    <uni-icon :type="item.checked ? 'checkbox-filled' : 'circle'" size="24" @click="_checkedStore(index)"></uni-icon>
                    <view class="shoppingStore__title">
                    	{{item.title}}
                    </view> 
                    <uni-icon type="arrowright" size="20" color="#ccc"></uni-icon>
                </view>
                <view class="shoppingStore__good" v-for="(goodItem, goodIndex) in item.good" :key="goodIndex">
                    <list-good-swipe :data="goodItem" :index="[index, goodIndex]" v-on:change="_changeGood" @click="_clickGood"></list-good-swipe>
                </view>
            </view>
            <view class="shoppingBottom">
                <view class="shoppingBottom__checked" @click="_checkedAll()">
                	<uni-icon :type="checkedAll ? 'checkbox-filled' : 'circle'" size="24"></uni-icon>全选
                </view>
                <view class="shoppingBottom__content">
                    <text class="shoppingBottom__note">不含运费</text>
                    <text class="shoppingBottom__price">0</text>
                </view>
                <view class="shoppingBottom__btn">
                	结算(0)
                </view>
            </view>
        </template>
        <view v-if="true" class="pageEmpty">
            <image class="pageEmpty__img" src="../../../static/img/empty.png" mode="aspectFit"></image>
            <text class="pageEmpty__text">您还没添加任何商品~</text>
            <view class="pageEmpty__btn">
                去逛逛
            </view>
        </view>
        <view class="goodList" :class="{'active': true}">
            <view class="goodList__header">
                <uni-icon type="navigate"></uni-icon>
                经常一起买
            </view>
            <block v-for="(item, index) in bottomGood" :key="index">
                <list-good type="row" width="50%" :data="item" :index="index"></list-good>
            </block>
            <view class="goodList__footer">
                <load-more :status="status"></load-more>
            </view>
        </view>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	import listGood from '@/components/wlp-list-good/wlp-list-good.vue';
	import listGoodSwipe from '@/components/wlp-list-good-swiper/wlp-list-good-swiper.vue';
	import loadMore from '@/components/uni-load-more/uni-load-more.vue';

	import {
		router
	} from '@/common/util.js';
    
	export default {
		components: {
			uniNavBar,
            uniIcon,
            listGood,
            listGoodSwipe,
            loadMore
		},
		data() {
			return {
                checkedAll: false,
                cartData:[
                    {
                        title: '水果市场',
                        checked: false,
                        good:[
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝1',
                                titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝1',
                                helper: '特惠',
                                sku: [
                                    {
                                        name: '300/g 每盒'
                                    }
                                ],
                                price: '9.9',
                                originalPrice: '45',
                                size: 2,
                                checked: false
                            },
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠232',
                                titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝1',
                                helper: '特惠',
                                sku: [
                                    {
                                        name: '300/g 每盒'
                                    }
                                ],
                                price: '9.9',
                                originalPrice: '45',
                                size: 1,
                                checked: false
                            }
                        ]
                    },
                    {
                        title: '水果市场2',
                        checked: false,
                        good:[
                            {
                                imgUrl: '/static/temp/good.jpg',
                                title: '香水菠萝香水菠萝香水菠萝香水菠萝1',
                                titleSub: '香水菠萝香水菠萝香水菠萝香水菠萝1',
                                helper: '特惠',
                                sku: [
                                    {
                                        name: '300/g 每盒'
                                    }
                                ],
                                price: '9.9',
                                originalPrice: '45',
                                size: 3,
                                checked: false
                            }
                        ]
                    }
                ],
				bottomGood: [
                    {
                        imgUrl: '/static/temp/good.jpg',
                        title: '香水菠萝香水菠萝香水菠萝香水菠萝1',
                        helper: '特惠',
                        price: '9.9',
                        originalPrice: '45',
                        size: 99
                    },{
                        imgUrl: '/static/temp/good.jpg',
                        title: '香水菠萝2',
                        helper: '特惠',
                        price: '9.9',
                        originalPrice: '45',
                        size: 1
                    },{
                        imgUrl: '/static/temp/good.jpg',
                        title: '香水菠萝香水菠萝香水菠萝香水菠萝3',
                        helper: '折扣',
                        price: '9.9',
                        originalPrice: '45',
                        size: 0
                    },{
                        imgUrl: '/static/temp/good.jpg',
                        title: '香水菠萝4',
                        helper: '折扣',
                        price: '9.9',
                        originalPrice: '45',
                        size: 0
                    },{
                        imgUrl: '/static/temp/good.jpg',
                        title: '香水菠萝5',
                        helper: '折扣',
                        price: '9.9',
                        originalPrice: '45',
                        size: 0
                    },{
                        imgUrl: '/static/temp/good.jpg',
                        title: '香水菠萝',
                        helper: '折扣',
                        price: '9.9',
                        originalPrice: '45',
                        size: 0
                    },{
                        imgUrl: '/static/temp/good.jpg',
                        title: '香水菠萝',
                        helper: '折扣',
                        price: '9.9',
                        originalPrice: '45',
                        size: 0
                    },
                ],
			};
		},
        methods: {
        	_clickHeader: function() {
                router.navigateBack();
        	},
            _checkedAll: function() { // 全选
                this.checkedAll = !this.checkedAll;
                this.cartData.forEach(function(elem, index, arr){
                    arr[index].checked = this.checkedAll;
                    elem.good.forEach(function(elem, index){
                        this.good[index].checked = this.checked;
                    }, arr[index]);
                }, this);
            },
            _checkedStore: function(storeIndex) { // 店铺全选
                var bool = true;
                this.cartData.forEach(function(elem, index, arr){
                    if(index == storeIndex){
                        arr[index].checked = !arr[index].checked;
                        elem.good.forEach(function(elem, index){
                            this.good[index].checked = this.checked;
                        }, arr[index]);
                    }
                    if(!arr[index].checked){
                        bool = false;
                    }
                });
                this.checkedAll = bool;
            },
            _checkedGood: function(storeIndex, goodIndex) { // 商品选择
                var storeBool = true;
                this.cartData.forEach(function(elem, index, arr){
                    if(index == storeIndex){
                        var goodBool = true;
                        elem.good.forEach(function(elem, index, arr){
                            if(index == goodIndex){
                                arr[index].checked = !arr[index].checked;
                            }
                            if(!arr[index].checked){
                                goodBool = false;
                            }
                        });
                        arr[index].checked = goodBool;
                    }
                    if(!arr[index].checked){
                        storeBool = false;
                    }
                });
                this.checkedAll = storeBool;
            },
            _clickGood: function(index, value) {
                let _this = this;
                if(value == 'checked'){
                    this._checkedGood(index[0], index[1])
                    return;
                }
                if(value == 'del'){
                    uni.showModal({
                        title: '删除',
                        content: '确定要删除宝贝吗！',
                        confirmText: '删除',
                        confirmColor: '#dd524d',
                        success: function (res) {
                            if (res.confirm) {
                                _this.cartData[index[0]].good.splice(index[1],1);
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                    return;
                }
                console.log('%s %s',index,value)
            },
            _changeGood: function(value, index) {
                this.cartData[index[0]].good[index[1]].size = value;
            },
        },
	}
</script>

<style lang="scss">
    @import "@/style/mixin/flex.scss";
    @import "@/style/mixin/price-before.scss";
    @import "@/style/page/empty.scss";
    
    .shoppingStore{
        background-color: #fff;
        margin: 24upx 24upx 0;
        border-radius: 16upx;
        overflow: hidden;
        
        &__header{
            @include flex(null, center);
            padding: 16upx 16upx 8upx 8upx;
        }
        
        &__title{
            @include flex-self(full);
            padding-left: 16upx;
        }
                
        .uni-icon-checkbox-filled{
            color: $uni-color-primary;
        }
        .uni-icon-circle{
            color: $uni-text-color-grey;
        }
    }
    
    .shoppingBottom{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 48px;
        padding-left: 8px;
        z-index: 10;
        background-color: #f7f7f7;
        border-top: 1upx solid #ccc;
        @include flex(between, center);
        
        &__checked{
            @include flex(null, center);
            line-height: 1;
            color: $uni-text-color-grey;
                    
            .uni-icon-checkbox-filled{
                color: $uni-color-primary;
            }
            .uni-icon-circle{
                color: $uni-text-color-grey;
            }
        }
        
        &__content{
            @include flex-self(full);
            @include flex(end, center);
            padding-right: 8px; 
        }
        
        &__note{
            font-size: $uni-font-size-sm;
            color: $uni-text-color-grey;
            padding-right: 8px;
        }
        
        &__price{
            font-size: $uni-font-size-subtitle;
            color: $uni-color-error;
            
            &::before{
                @extend %__priceBefore;
            }
        }
        
        &__btn{
            padding: 0 16px;
            margin-right: 16px;
            height: 32px;
            line-height: 32px;
            border-radius: 32px;
            color: #fff;
            background-color: $uni-color-primary;
        }
    }
    
    .goodList{
        @include flex(null, null, null, wrap);
        padding: 80upx 8upx 0;
        
        &.active{
            padding-bottom: 54px;
        }
        
        &__header{
            width: 100%;
            padding-top: 10px;
            @include flex(center, center);
            color: $uni-color-primary;
            
            &::before,&::after{
                height: 1px;
                width: 30px;
                background-color: $uni-color-primary;
                content: '';
                margin: 0 8px;
            }
        }
        
        &__footer{
            width: 100%;
        }
        
        .pageGoodRow{
            padding: 8upx;
        }
        
        .pageGood__left{
            border-radius: 16upx 16upx 0 0;
            overflow: hidden;
        }
        
        .pageGood__content{
            background-color: #fff;
            box-sizing: border-box;
            padding: 0 8upx;
            border-radius: 0 0 16upx 16upx;
            overflow: hidden;
        }
    }
</style>
